Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@carbon/colors
Advanced tools
Colors for digital and software products using the Carbon Design System
Colors for digital and software products using the Carbon Design System
To install @carbon/colors
in your project, you will need to run the following
command using npm:
npm install -S @carbon/colors
If you prefer Yarn, use the following command instead:
yarn add @carbon/colors
You can use the @carbon/colors
module in your JavaScript, in addition to your
Sass.
In Sass, you can import the files individual by doing:
@use '@carbon/colors';
// Another way if using `@carbon/react
@use '@carbon/react/scss/colors';
These color variables follow the naming convention: <swatch>-<grade>
. For
example:
colors.$blue-50;
colors.$cool-gray-10;
colors.$black-100;
colors.$white-0;
Alongside the color variables detailed above, we also provide a map of colors so
that you can programmatically use these values. This map is called $colors
and
each key is the name of a swatch. The value of these swatches is also a map, but
each key is now the grade. In code, this looks like the following:
$colors: (
'blue': (
10: #edf4ff,
// ...
)
);
For JavaScript, you can import and use this module by doing the following in your code:
// ESM
import { black, blue, warmGray } from '@carbon/colors';
// CommonJS
const { black, blue, warmGray } = require('@carbon/colors');
Each color swatch is exported as a variable, and each color name is also exported as an object that can be called by specifying grade, for example:
black;
blue[50]; // Using the `blue` object.
warmGray100; // Using the `warmGray100` variable.
If you're looking for more examples on how to use @carbon/colors
, we have some
examples that you can check out:
We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀
Licensed under the Apache 2.0 License.
This package uses IBM Telemetry to collect metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.
FAQs
Colors for digital and software products using the Carbon Design System
The npm package @carbon/colors receives a total of 98,252 weekly downloads. As such, @carbon/colors popularity was classified as popular.
We found that @carbon/colors demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.